
import styled from 'styled-components';
import React, { CSSProperties, useEffect, useState } from 'react';
import { Card, Descriptions } from 'antd';
import { convertFileSrc } from '@tauri-apps/api/core';
import APP_LOGO from '../../../assets/react.svg';

import { ApplicationCategory, appstoreGetCategories, qiniuGetUrl } from '../../../services';
import { ImageList } from '../../../components';
import { InstalledApplication } from '@/services/local';

export interface InstalledApplicationDetailProps {
    style?: CSSProperties;
    item: InstalledApplication;
}

export const InstalledApplicationDetail: React.FC<InstalledApplicationDetailProps> = (props: any) => {
    const [categories, setCategories] = useState<Array<ApplicationCategory>>([]);

    const [images, setImages] = useState<Array<string>>([]);

    useEffect(() => {
        // appstoreGetCategories
        appstoreGetCategories().then((data) => {
            setCategories(data);
        })
    }, []);

    useEffect(() => {
        //
        qiniuGetUrl(props.item.images).then((url) => {
            console.log(url);
            if (url && url.length > 0) {
                setImages(url);
            }
        });
    }, [props.item.images]);

    if (!props.item) {
        return (
            <EmptyContainer style={props.style}>
                没有找到相关数据~
            </EmptyContainer>
        );
    }

    return (
        <Container style={props.style}>
            <Descriptions
                title={<Title>
                    <Icon src={convertFileSrc(props.item.icon, 'asset')}></Icon>
                    {props.item.name}
                </Title>}
                layout={'horizontal'}
                column={1}>
                <Descriptions.Item label="分类">{categories.filter((category) => {
                    return (props.item.categories & category.code) === category.code;
                }).map((category, index) => {
                    return (
                        <CategoryItem key={'category_' + index}>
                            {category.name}
                        </CategoryItem>
                    );
                })}</Descriptions.Item>
                <Descriptions.Item label="标识">{props.item.identifier}</Descriptions.Item>
                <Descriptions.Item label="版本">{props.item.version}</Descriptions.Item>
                <Descriptions.Item label="应用简介">{props.item.description}</Descriptions.Item>
            </Descriptions>
        </Container>
    );
}

const EmptyContainer = styled.div`
    height: 100%;
    width: 100%;
    padding: 10px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
`;

const Container = styled.div`
    height: 100%;
    width: 100%;
    padding: 6px;
`;

const Title = styled.div`
    display: flex;
    line-height: 25px;
    font-size: 16px;
    gap:10px;
`;

const Icon = styled.img`
    width: 25px;
    height:25px;
`;

const CategoryItem = styled.div`
`;
